<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.title{
				width: 100%;
				height: 50px;
				text-align:center;
			}
			.btns{
				margin-top: 50px;
				text-align: center;
			}
			.start{
				margin: 0px 20px;
			}
			.qs{
				color: #ff0000 ;
			}
		</style>
	</head>
	<body>
		<div class="title">
			<h1>随机点名</h1>
			<div class="name">
				名字是：
				<span class="qs">这里显示姓名</span>
				
			</div>
		</div>
		<div class="btns">
			<button class="start">开始</button>
			<button class="end">结束</button>
		</div>
		<script>
			// 定义一个定时器全局变量
			let timer=0;
			// 随机变量
			let radom=0;
			const person=['赵云','张飞','李典','刘备','关羽','Mrxiang'];
			// 获取元素
			const start=document.querySelector('.start');
			//获取元素
			const qs = document.querySelector('.qs');
			// 
			start.addEventListener('click',function(){
				// 
				timer = setInterval(function(){
					// 抽随机数
					 radom = parseInt(Math.random()*person.length);
					console.log(person[radom]);
					// 将抽到的对象插入到元素中
					qs.innerHTML=person[radom];
					// 如果数组为空禁用两个按钮
					if(person.length===1){
						// 禁用开始按钮
						start.disabled=end.disabled=true;
						// 禁用结束按钮
						
					}
				},99)
				
				
			});
			// 获取结束按钮
			let end=document.querySelector('.end');
			// 为end按钮注册事件监听
			end.addEventListener('click',function(){
				//关闭定时器就可以选择出抽奖名字
				clearInterval(timer);
				// 抽完人要从数组里面剔除
				person.splice(radom,1);
				// console.log(person);
				
			})
			
		</script>
	</body>
</html>